<!--
*@Author: QWP
*@Description: 应急首页常用功能
*@Date: 2024-07-14 16:47:58
-->
<template>
  <u-card title="常用功能" class="u-emergency-common-fun">
    <a-list :data-source="isHaveWarn ? warnDatas : commonDatas" 
      :grid="{ gutter: [16, 16], xs: 2, sm: 3, md: 3, lg: 4, xl: 4, xxl: isHaveWarn ? 2 : column }">
      <template #renderItem="{ item, index }">
        <a-row justify="center" class="f-cursor f-item-hover-bg f-padding-t4" @click="toJump(item)">
          <a-space direction='vertical' align="center">
            <div class="u-common-fun-icon">
              <u-icon-font :type="item.icon"></u-icon-font>
            </div>
            <span class="u-common-fun-title">{{ item.name }}</span>
          </a-space>
        </a-row>
      </template>
    </a-list>
  </u-card>
  <div style="display: none">
    <component :is="dynamicComponent" ref="dynamicRef" style="display: none"
      :isShowShare="false"
      @success="submitSuccess">
    </component>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, defineAsyncComponent, markRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useHomeStore } from "@/store";
import { storeToRefs } from "pinia";
import { FolderOpenOutlined } from '@ant-design/icons-vue'
import { UIconFont } from '@/components/common/iconfont'
import { urlFile } from '@/util/common'
import { chatEventBus } from '@/util/eventBus'

const router = useRouter();
interface Props {
  isHaveWarn?: boolean,
  column?: number,
}
const props = withDefaults(defineProps<Props>(), {
  column: 4,
})
const emits = defineEmits(['funDirect'])

const { allMenu } = storeToRefs(useHomeStore())

const getDgData = (id: string) => {
  let tData = null;
  const dg = (data1) => {
    data1.forEach(item => {
      if(item.key == id) {
        tData = item
      }
      if(!tData && (item['children'] || []).length != 0) {
        dg(item['children'] || [])
      }
    })
  }
  dg(allMenu.value)
  return tData
}

const isHaveYjwarningMenu = computed(() => {
  return getDgData('1696852837587267636') != null
})

// 常用功能数据
const warnDatas = reactive([
  {
    icon: 'icon-a-chuangjianqunliao1', name: '应急联络', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/emergency/emergencyWarning/index.vue',
  },
  {
    icon: 'icon-yingjirukou', name: '相关业务系统', type: 'tab',
    path: '/TransitIndex/EmergencyNav'
  },
])
const commonDatas = reactive([
  {
    icon: 'icon-a-chuangjianqunliao1', name: '创建群聊', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/emergency/group/GroupGuid.vue', busiType: 'createGroup',
  },
  {
    icon: 'icon-yingjifangan', name: '应急预案', type: 'tab',
    path: '/TransitIndex/EmergencyScheme'
  },
  {
    icon: 'icon-yingjirukou', name: '相关业务系统', type: 'tab',
    path: '/TransitIndex/EmergencyNav'
  },
  ...(
    isHaveYjwarningMenu ? [
      {
        icon: 'icon-yingjirukou', name: '应急发布', type: 'tab',
        path: '/TransitIndex/EmergencyWarning'
      }
    ] : []
  )
])

const dynamicRef = ref(null);
const dynamicComponent = ref<any>('div')

// 跳转，打开弹窗
const nowBusiType = ref<string>('')
const toJump = (data) => {
  nowBusiType.value = ''
  if (data.type == 'tab') {
    router.push({
      path: data.path,
      query: {
        _tab: '1',
        label: data.name
      }
    })
  } else {
    nowBusiType.value = data['busiType'] || ''
    const modules = import.meta.glob(['/src/views/oa/*/*.vue', '/src/views/oa/*/*/*.vue', '/src/views/oa/*/*/*/*.vue']);
    const link = modules[data.path]
    dynamicComponent.value = markRaw(defineAsyncComponent(modules[data.path]))
    setTimeout(() => {
      dynamicRef.value[data.methodName]();
    }, 50)
  }
}

// 保存成功回调
const submitSuccess = (data) => {
  if(nowBusiType.value == 'createGroup') {
    chatEventBus.emit('openGroup', data)
  }
}

</script>

<style lang='scss'>
.u-emergency-common-fun {
  padding: 0 16px 16px;
  .u-common-fun-icon {
    width: 48px;
    height: 48px;
    background: rgba(24, 144, 255, 0.1);
    border-radius: 16px 16px 16px 16px;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    color: #1890FF
  }
  .ant-card-head {
    padding-left: 0 !important;
    .ant-card-head-title {
      padding-left: 0 !important;
      font-size: var(--font-size-level-2);
      &::before {
        display: none
      }
    }
  }
  .ant-card-body {
    padding-bottom: 0!important
  }
  .u-common-fun-title {
    font-size: var(--font-size-level-1);
    color: #333333;
  }
}
</style>